<template>
	<io-popup :visible="show && platform.isWeapp()" title="授权头像和昵称" @close="onClose">
		<view class="user-profile">
			<template v-if="platform.isWeapp()">
				<button class="user-profile-avatar" open-type="chooseAvatar" @chooseAvatar="onChooseAvatar"
					:plain="true">
					<image v-if="userProfileState.avatarUrl" :src="userProfileState.avatarUrl">
					</image>
					<image v-else src="@/static/header.png" />
				</button>
				<input class="user-profile-input" type="nickname" placeholder="请输入昵称"
					v-model="userProfileState.nickName" />
				<view class="user-profile-btn" @tap="onAuthUserProfile">授权</view>
			</template>
		</view>
	</io-popup>
</template>
<script lang="ts" setup>
	import { platform } from '@/utils/platform';
	import { reactive } from 'vue';
	import { useUserStore } from '@/store/user';
	import IoPopup from '@/components/io-popup/io-popup';
	defineProps({
		show: {
			type: Boolean,
			default: false,
		},
	})
	const emits = defineEmits(['success', 'fail', 'close']);

	const userStore = useUserStore();
	const userProfileState = reactive({
		nickName: '',
		avatarUrl: '',
	})
	const onChooseAvatar = (e : any) => {
		const { avatarUrl } = e.detail
		userProfileState.avatarUrl = avatarUrl;
		console.log('授权', e);
	}

	const onClose = () => {
		emits('close');
	}
	const onAuthUserProfile = () => {
		userStore.setUserDesc({
			nickName: userProfileState.nickName,
			avatar: userProfileState.avatarUrl,
		})
		emits('success')
	}
</script>
<style lang="scss">
	.user-profile {
		display: flex;
		flex-direction: column;

		&-avatar {
			text-align: center;
			background-color: #FFFFFF;
			margin-top: var(--page-padding);
			border: none !important;

			image {
				width: 50px;
				height: 50px;
			}
		}

		&-input {
			font-size: 14px;
			border: 1px solid #F0F0F0;
			height: 40px;
			line-height: 40px;
			margin-top: var(--page-padding);
			border-radius: 3px;
			padding-left: 10px;
			padding-right: 10px;
			text-align: center;
		}

		&-btn {
			color: white;
			background-color: var(--primary-color);
			font-size: 18px;
			line-height: 2.5;
			font-weight: 400;
			border-radius: 23px;
			text-align: center;
			margin-top: var(--page-padding);
			border: 1px solid var(--primary-color);
			display: flex;
			justify-content: center;

			&:hover {
				background-color: var(--primary-color-active);
				border: 1px solid var(--primary-color-active);
			}
		}
	}
</style>